import React, { useState } from "react";
import { Button, Layout, Avatar, Dropdown, message, Modal } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { setIsCollapsed } from "../../store/reducers/tab";
import { useNavigate } from "react-router-dom";
import "./index.css";

const { Header } = Layout;

const CommonHeader = ({ Collapsed }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 显示退出确认弹窗
  const showLogoutModal = () => {
    setIsModalOpen(true);
  };

  // 确认退出
  const handleOk = () => {
    try {
      // 清除本地存储的token
      localStorage.removeItem("token");
      
      // 关闭弹窗
      setIsModalOpen(false);
      
      // 跳转到登录页面
      navigate("/login");
      
      // 显示退出成功消息
      message.success("退出登录成功");
    } catch (error) {
      // 即使出错也执行退出操作
      localStorage.removeItem("token");
      navigate("/login");
      message.warning("退出登录时出现异常，但已强制退出");
    }
  };

  // 取消退出
  const handleCancel = () => {
    setIsModalOpen(false);
    console.log('用户取消退出操作');
  };

  // 个人中心功能
  const goToProfile = () => {
    message.info("个人中心功能待开发");
  };

  const items = [
    {
      key: "1",
      label: (
        <button
          type="button"
          onClick={goToProfile}
          style={{
            background: "none",
            border: "none",
            padding: "0",
            margin: "0",
            color: "#1677ff",
            cursor: "pointer",
            font: "inherit",
            width: "100%",
            textAlign: "left",
          }}
        >
          个人中心
        </button>
      ),
    },
    {
      key: "2",
      label: (
        <button
          type="button"
          onClick={showLogoutModal}
          style={{
            background: "none",
            border: "none",
            padding: "0",
            margin: "0",
            color: "#1677ff",
            cursor: "pointer",
            font: "inherit",
            width: "100%",
            textAlign: "left",
          }}
        >
          退出
        </button>
      ),
    },
  ];

  // 点击展开收起按钮
  const toggleCollapsed = () => {
    dispatch(setIsCollapsed());
  };

  return (
    <Header className="header-container">
      <Button
        type="text"
        icon={Collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={toggleCollapsed}
        style={{
          fontSize: "16px",
          backgroundColor: "#fff",
          width: 64,
          height: 32,
        }}
      />
      <Dropdown 
        menu={{ items }} 
        trigger={["click"]}
        placement="bottomRight"
      >
        <Avatar
          size={40}
          src={require("../../assets/images/touxiang.jpg")}
          alt="userlogo"
          style={{ cursor: "pointer" }}
        />
      </Dropdown>
      
      {/* 退出确认弹窗 */}
      <Modal
        title="确认退出"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
        closable={{ 'aria-label': '关闭退出确认弹窗' }}
      >
        <p>确定要退出登录吗？</p>
      </Modal>
    </Header>
  );
};

export default CommonHeader;